<template>
	<view class="cateContainer">
	    <!-- 搜索组件 S-->
	    <mySearch id="mySearch" v-if="searchShow"></mySearch>
	    <!-- 搜索组件 E-->
		<!-- 容器区域 S -->
		<view class="boxContainer" :style="'height:'+(wh-searchHeight)+'px'">
		    <!-- 左侧 S-->
		    <scroll-view class="nav" scroll-y>
		        <!-- <view  class="active">分类1</view> -->
		        <view @click="changeActive(item)" v-for="item in cateList"  :class="{ active: item.id === activeCate.id }" :key="item.id">{{item.name}}</view>
		    </scroll-view>
		    <!-- 左侧 E-->
			<!-- 右侧 S-->
			<view class="cate">
				<!-- 图片 -->
				<image class="cateImg" :src="activeCate.img_url"></u--image>
				<!-- 滚动商品容器 S-->
				<scroll-view @scrolltolower="loadMore" scroll-y class="listBox" :style="'height:'+(wh-searchHeight-imgHeight)+'px'">
					<!-- 商品列表 -->
					<goodList v-if="list.length" :list="list"></goodList>
					<!-- 列表底部的展示 -->
					<u-loadmore  v-if="list.length" :status="status"></u-loadmore>
					<!-- 空的状态 -->
					<u-empty v-if="list.length === 0" mode="list" marginTop="200rpx"></u-empty>
				</scroll-view>
				<!-- 滚动商品容器 E-->
			</view>
			<!-- 右侧 E-->
		</view>
		<!-- 容器区域 E -->
	</view>
</template>
<script>
	import setBadge from '@/mixins/setBadge.js'
	export default {
		mixins:[setBadge],
		data() {
			return {
				// 控制搜索组件显示
				searchShow:false,
				wh:0,			// 窗口高度
				searchHeight:0,  // 搜索框的高度
				imgHeight:0,     // 分类图片高度
				cateList:[],  // 左侧分类列表信息
				activeCate:{},  // 激活分类信息
				count:0,  	    // 总数
				currentPage:1,  // 页码
				pageSize:8, 	// 每页数量
				list:[],		// 商品列表
				status:'loadmore',  // 数据状态  loadmore loading   nomore
			};
		},
		// 挂载完成
		mounted() {
			// 获取设备信息
			uni.getSystemInfo({
				success:res=>{
					// 读取设备高度
					this.wh = res.windowHeight
				}
			})
			// 得到选择器对象
			const query = uni.createSelectorQuery().in(this)
			// 找到搜索框高度，调用boundingClientRect，回调里面形参data就是想要的组件节点数据了
			query.select("#mySearch").boundingClientRect(data=>{
				console.log(data);
				this.searchHeight = data.height
			}).exec()
			// 找分类图片高度
			query.select('.cateImg').boundingClientRect(data=>{
				this.imgHeight = data.height
			}).exec()
			// 总结：  uni.createSelectorQuery().in(this).select(选择器).boundingClientRect(data=>{ data就是 }).exec()
		},
		onShow() {
			// 搜索组件被创建了
			this.searchShow = true
			// 页面打开调用获取全部分类
			this.getAllCate()
		},
		onHide(){
			// 搜索组件关闭了
			this.searchShow = false
			// 离开页面的时候，清除分类信息
			uni.removeStorageSync('cateId')
		},
		methods: {
			// 获取全部分类的方法
			async getAllCate() {
				let res = await uni.$http.get('/catalog/index')
				this.cateList = res.categoryList
				// 如果有分类，那么默认激活高亮信息为第一个
				if(this.cateList.length){
					// 从本地取出cateId 
					const cateId = uni.getStorageSync('cateId')
					if(cateId){
						// 是从首页点击了分类项目或分类标题，才跳转过来的
						let row = this.cateList.find(item=>item.id === cateId)  // 通过id，找到分类的完整信息
						this.changeActive(row)  // 类似模拟左侧点击了一下，传入分类信息 【复用了重置逻辑、获取列表逻辑】
					}else{ 
						// 直接点击了tabBar分类过来的
						this.activeCate = this.cateList[0]
						// 第一次请求激活分类下的商品信息
						this.getGoodList()
					}
					
				}
			},
			// 获取激活分类下的商品列表
			async getGoodList(){
				this.status = 'loading'
				let res = await uni.$http.post('/catalog/currentlist',{
					id:this.activeCate.id,
					page:this.currentPage,
					size:this.pageSize
				})
				this.count = res.count
				this.list = [...this.list,...res.data]  // 赋值不对！ 移动端的列表是不断变长的，所以list应该不断变大
				// 判断是否结束
				if(this.list.length >= this.count){
					this.status = 'nomore'
				}else{
					this.status = 'loadmore'
				}
			},
			// 加载更多数据
			async loadMore(){
				console.log('滚动加载更多数据')
				// 只有status 为 loadmore 表示可以继续加载   loading 加载中   nomore 没有了
				if(this.status !== 'loadmore') return
				// 可以加载,页码变化，获取列表
				this.currentPage++
				this.getGoodList()
			},
			// 左侧点击激活切换
			changeActive(row){
				// 修改激活分类信息
				this.activeCate = row
				// 重置相关数据
				this.list = []
				this.count = 0
				this.status = 'loadmore'
				this.currentPage = 1
				// 重新获取列表
				this.getGoodList()
			}
		},
	}
</script>

<style lang="scss">
.cateContainer{
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	.boxContainer{
		display: flex;
		flex: 1;
		.nav{
			width: 180rpx;
			border-right: 1rpx solid #fafafa;
			height: 100%;
			view{
				line-height: 100rpx;
				text-align: center;
				color: #333;
				font-size: 30rpx
			}
			.active{
				color:#409eff;
				font-size: 32rpx
			}
		}
		.cate{
			flex: 1;
			padding:0 20rpx;
			height: 100%;
			flex-direction: column;
			.cateImg{
				width: 100%;
				height: 160rpx;
			}
			.listBox{
				flex:1;
			}
		}
	}
}
</style>
